<template>
  <div class="main">
    <div class="alex-top">
      <div>设备总数：{{ totaldev }}</div>
      <div>在线设备：{{ online }}</div>
    </div>
    <div class="alex-listbox">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了..."
        @load="onLoad"
        class="alex-list"
      >
        <van-row
          v-for="item in list"
          :key="item.stcd"
          class="alex-row-padding"
          :class="item.dsfl == 1 ? 'alex-rowbac-on' : 'alex-rowbac-off'"
        >
          <van-row class="alex-font-center">
            <van-col span="3">
              <div v-if="item.dsfl == 1" class="alex-dsfl-on" />
              <div v-else class="alex-dsfl-off" />
            </van-col>
            <van-col span="13">{{ item.stcd }}</van-col>
            <van-col span="8"> 电压:{{ item.voltage }} V </van-col>
          </van-row>
          <van-row class="alex-font-center">
            <van-col span="19" class="alex-jj">
              <div>
                {{ item.stnm }}
              </div>
            </van-col>
            <van-col span="5" class="alex-botton">
              <van-button
                type="info"
                size="mini"
                color="#d98884"
                @click="queryDetails(item)"
                >站点详情</van-button
              >
            </van-col>
          </van-row>
        </van-row>
      </van-list>
    </div>
    <van-dialog v-model="alexshow" :title="devitem.stnm">
      <van-cell-group title="测站信息">
        <van-cell
          title-class="left-title"
          value-class="right-value"
          :value="devitem.stcd"
          label=""
          title="测站编码"
        />
        <van-cell
          title-class="left-title"
          value-class="right-value"
          :value="devitem.voltage + ' V'"
          label=""
          title="电压"
        />
        <van-cell
          title-class="left-title"
          value-class="right-value"
          :value="devitem.dsfl == 1 ? '在线' : '掉线'"
          label=""
          title="运行状态"
        />
        <van-cell
          title-class="left-title"
          value-class="right-value"
          icon="location-o"
          title="设备地址"
          :value="devitem.stlc"
          label=""
        />
        <van-cell
          title-class="left-title"
          value-class="right-value"
          icon="cluster-o"
          title="所属机构"
          :value="group"
          label=""
        />
        <van-cell
          title-class="left-title"
          value-class="right-value"
          icon="user-circle-o"
          title="维护人员"
          :value="weihu"
          label=""
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      params: {
        currentPage: 0,
        pageSize: 10,
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      alexshow: false,
      devitem: {},
      group: "成都市李家岩开发有限公司",
      weihu: "四川恒宣建设工程有限公司",
      totaldev: 0,
      online: 0,
      api_uri: '/shsqapi/ljyalex'
    };
  },
  methods: {
    onLoad() {
      let _this = this;
      this.params.currentPage++;
      if (this.refreshing) {
        this.params.currentPage = 1;
        this.finished = false;
      }
      this.axios({
        method: "post",
        url: _this.api_uri + "/shsq/getDevices",
        params: _this.params,
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data.code == 201) {
            _this.loading = false;
            Toast({
              message: "数据加载失败...",
              icon: "warning-o",
            });
          }
          if (res.data.code == 200) {
            _this.loading = false;
            let newlist = res.data.data;
            for (let i = 0; i < newlist.length; i++) {
              _this.list.push(newlist[i]);
            }
            if (newlist.length < _this.params.pageSize) {
              _this.finished = true;
            }
          }
        })
        .catch((err) => {
          _this.loading = false;
          console.log("加载数据时发生未知错误...", err);
        });
    },
    queryDetails(item) {
      this.devitem = item;
      this.alexshow = true;
    },
    queryOnlines() {
      let _this = this;
      this.axios({
        method: "post",
        url: _this.api_uri + "/shsq/getOnlines",
        dataType: "json",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data.code == 201) {
            Toast({
              message: "数据加载失败...",
              icon: "warning-o",
            });
          }
          if (res.data.code == 200) {
            _this.totaldev = res.data.data.totaldev;
            _this.online = res.data.data.online;
          }
        })
        .catch((err) => {
          _this.loading = false;
          console.log("加载数据时发生未知错误...", err);
        });
    },
  },

  mounted() {
    this.queryOnlines();
  },
};
</script>
<style scoped>
@import "../../assets/css/device.css";
</style>